import QtQuick.Shapes 1.14
import QtGraphicalEffects 1.14
import QtQuick.Extras 1.4
import Qt.labs.platform 1.1
import QtQuick.Controls 2.15
import QtQuick 2.15
import QtQuick.Layouts 1.14

Item {
    id:root
    implicitWidth: 308
    implicitHeight: 260
    property int inputSelectedIndex: -1

    signal buttonClicked(string btn);

    property var rectmodel:[
        {
            name:'stretch',
            image:'qrc:/img/stretch.png',
        },
        {
            name:'rotate',
            image:'qrc:/img/rotate.png',
        },
        {
            name:'center',
            image:'qrc:/img/center.png',
        },
        {
            name:'typesetting',
            image:'qrc:/img/typesetting.png',
        },
    ];



    Rectangle{
        anchors.fill: parent
        color:"transparent"

        Rectangle{
            id:rect1
            anchors.horizontalCenter: parent.horizontalCenter
            width: 308
            height: 92
            anchors.top: parent.top
            radius: 10
            color:Qt.rgba(255,255,255,0.3)
            RowLayout{
                // anchors.fill: parent
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.verticalCenter: parent.verticalCenter
                spacing: 15

                Repeater {
                    model: rectmodel
                    delegate: Rectangle{
                        width: 53
                        height: 53
                        id:rect_bac
                        radius: 10
                        color:"transparent"
                        Image {
                            width: 35
                            height: 35
                            anchors.centerIn: parent
                            id:img
                            source: modelData.image
                        }

                        MouseArea {
                            anchors.fill: parent
                            onPressed: {
                                rect_bac.color=Qt.rgba(255,255,255,0.3)
                            }
                            onReleased: {
                                rect_bac.color="transparent"
                                root.buttonClicked(modelData.name)
                                console.log('modelData.name',modelData.name)
                            }
                        }
                    }
                }
            }

        }

        Rectangle {
            anchors.horizontalCenter: parent.horizontalCenter
            width: 308
            height: 112
            anchors.top: rect1.bottom
            anchors.topMargin: 16
            color: "transparent"

            Rectangle {
                id:left_up_width
                radius: 5
                anchors.left: parent.left
                anchors.top: parent.top
                width: 149
                height: 52
                color:root.inputSelectedIndex === 1 ?Qt.rgba(255,255,255,0.9):Qt.rgba(255,255,255,0.3)
                Image {
                    id: img_width
                    source: root.inputSelectedIndex === 1 ? 'qrc:/img/width_pressed.png':  'qrc:/img/width.png'
                    anchors.left: parent.left
                    anchors.leftMargin: 13
                    anchors.verticalCenter: parent.verticalCenter
                    width: 35
                    height: 35
                }

                // MouseArea{
                //     anchors.fill: parent

                //     onClicked: {
                //         num_keyboard.visible=true
                //         num_keyboard.itemIcon='qrc:/img/width_pressed.png'

                //     }
                // }

                TextInput{
                    anchors.left: img_width.right
                    anchors.leftMargin: 13
                    id:input_width
                    text:"1"
                    color: "#1989FA"
                    font{
                        family: "Microsoft YaHei"
                        pixelSize: 22
                    }
                    selectByMouse: true
                    selectedTextColor:"#FFF"
                    selectionColor: "#4CA1F6"
                    verticalAlignment: TextInput.AlignVCenter
                    horizontalAlignment: TextInput.AlignHCenter
                    anchors.fill: parent
                    font{
                        family: "Microsoft YaHei"
                        pixelSize: 23
                    }
                    leftPadding: 5
                    rightPadding: 5
                    focus:false

                    onFocusChanged: {
                        if(input_width.focus){
                            num_keyboard.visible=true
                            num_keyboard.itemIcon='qrc:/img/width_pressed.png'
                            num_keyboard.input_num=text
                            root.inputSelectedIndex =1
                        }else{
                            num_keyboard.visible=flase
                        }
                    }

                    Connections{
                        target: num_keyboard
                        function onAcceptClicked(numberText){
                            num_keyboard.visible=false
                            if(input_width.focus){
                                console.log("width",numberText)
                                input_width.text=numberText
                                input_width.focus=false
                            }
                        }
                    }
                }
            }
            Rectangle {
                id:left_bottom_copy
                radius: 5
                anchors.left: parent.left
                anchors.bottom: parent.bottom
                width: 149
                height: 52
                color:root.inputSelectedIndex === 2 ?Qt.rgba(255,255,255,0.9):Qt.rgba(255,255,255,0.3)
                Image {
                    id: img_copy
                    source: root.inputSelectedIndex === 2  ? 'qrc:/img/copy_pressed.png':'qrc:/img/copy.png'
                    anchors.left: parent.left
                    anchors.leftMargin: 13
                    anchors.verticalCenter: parent.verticalCenter
                    width: 35
                    height: 35
                }

                TextInput{
                    anchors.left: img_copy.right
                    anchors.leftMargin: 13
                    id:input_copy
                    text:"1"
                    color: "#1989FA"
                    font{
                        family: "Microsoft YaHei"
                        pixelSize: 22
                    }
                    selectByMouse: true
                    selectedTextColor:"#FFF"
                    selectionColor: "#4CA1F6"
                    verticalAlignment: TextInput.AlignVCenter
                    horizontalAlignment: TextInput.AlignHCenter
                    anchors.fill: parent
                    font{
                        family: "Microsoft YaHei"
                        pixelSize: 23
                    }
                    leftPadding: 5
                    rightPadding: 5
                    focus:false

                    onFocusChanged: {
                        if(input_copy.focus){
                            num_keyboard.visible=true
                            num_keyboard.itemIcon='qrc:/img/copy_pressed.png'
                            num_keyboard.input_num=text
                            root.inputSelectedIndex =2
                        }else{
                            num_keyboard.visible=flase
                        }
                    }

                    Connections{
                        target: num_keyboard
                        function onAcceptClicked(numberText){
                            num_keyboard.visible=false
                            if(input_copy.focus){
                                console.log("input_copy",numberText)
                                input_copy.text=numberText
                                input_copy.focus=false
                            }
                        }
                    }
                }
            }

            Rectangle {
                id:right_up_height
                radius: 5
                anchors.top: parent.top
                anchors.right: parent.right
                width: 149
                height: 52
                color:root.inputSelectedIndex === 3 ?Qt.rgba(255,255,255,0.9):Qt.rgba(255,255,255,0.3)

                Image {
                    id: img_height
                    source: root.inputSelectedIndex === 3  ? 'qrc:/img/height_pressed.png':'qrc:/img/height.png'
                    anchors.left: parent.left
                    anchors.leftMargin: 13
                    anchors.verticalCenter: parent.verticalCenter
                    width: 35
                    height: 35
                }

                TextInput{
                    anchors.left: img_copy.right
                    anchors.leftMargin: 13
                    id:input_height
                    text:"1"
                    color: "#1989FA"
                    font{
                        family: "Microsoft YaHei"
                        pixelSize: 22
                    }
                    selectByMouse: true
                    selectedTextColor:"#FFF"
                    selectionColor: "#4CA1F6"
                    verticalAlignment: TextInput.AlignVCenter
                    horizontalAlignment: TextInput.AlignHCenter
                    anchors.fill: parent
                    font{
                        family: "Microsoft YaHei"
                        pixelSize: 23
                    }
                    leftPadding: 5
                    rightPadding: 5
                    focus:false

                    onFocusChanged: {
                        if(input_height.focus){
                            num_keyboard.visible=true
                            num_keyboard.itemIcon='qrc:/img/height_pressed.png'
                            num_keyboard.input_num=text
                            root.inputSelectedIndex =3
                        }else{
                            num_keyboard.visible=flase
                        }
                    }

                    Connections{
                        target: num_keyboard
                        function onAcceptClicked(numberText){
                            num_keyboard.visible=false
                            if(input_height.focus){
                                console.log("input_copy",numberText)
                                input_height.text=numberText
                                input_height.focus=false
                            }
                        }
                    }
                }
            }

            Rectangle {
                id:right_bottom_spacing
                radius: 5
                anchors.bottom: parent.bottom
                anchors.right: parent.right
                width: 149
                height: 52
                color:  root.inputSelectedIndex === 4 ?Qt.rgba(255,255,255,0.9): Qt.rgba(255,255,255,0.3)

                Image {
                    id: img_spacing
                    source: root.inputSelectedIndex === 4  ?'qrc:/img/spacing_pressed.png' : 'qrc:/img/spacing.png'
                    anchors.left: parent.left
                    anchors.leftMargin: 13
                    anchors.verticalCenter: parent.verticalCenter
                    width: 35
                    height: 35
                }

                TextInput{
                    anchors.left: img_spacing.right
                    anchors.leftMargin: 13
                    id:input_spacing
                    text:"1"
                    color: "#1989FA"
                    font{
                        family: "Microsoft YaHei"
                        pixelSize: 22
                    }
                    selectByMouse: true
                    selectedTextColor:"#FFF"
                    selectionColor: "#4CA1F6"
                    verticalAlignment: TextInput.AlignVCenter
                    horizontalAlignment: TextInput.AlignHCenter
                    anchors.fill: parent
                    font{
                        family: "Microsoft YaHei"
                        pixelSize: 23
                    }
                    leftPadding: 5
                    rightPadding: 5
                    focus:false

                    onFocusChanged: {
                        if(input_spacing.focus){
                            num_keyboard.visible=true
                            num_keyboard.itemIcon='qrc:/img/spacing_pressed.png'
                            num_keyboard.input_num=text
                            root.inputSelectedIndex =4
                        }else{
                            num_keyboard.visible=flase
                        }
                    }

                    Connections{
                        target: num_keyboard
                        function onAcceptClicked(numberText){
                            num_keyboard.visible=false
                            if(input_spacing.focus){
                                console.log("input_copy",numberText)
                                input_spacing.text=numberText
                                input_spacing.focus=false
                            }
                        }
                    }
                }
            }
        }


    }



}
